import React from 'react';
export class OtherForm extends React.Component {
  // constructor() {
  //     super()
  //     // 表单状态
  //     this.state = {
  //        txt:'xx',
  //     }
  //   }
  state = {
    txt: 'xx',
    content: 'content',
    city: 'gz',
    isChecked: true,
  };

  handleChange = (e) => {
    if (e.target.name === 'isChecked') {
      this.setState({
        [e.target.name]: e.target.checked,
      });
    } else {
      // 改变state
      this.setState({
        [e.target.name]: e.target.value,
      });
    }
  };
  // 文本变化
  // handleChange = (e) => {
  //   // 改变state
  //   this.setState({
  //     txt: e.target.value,
  //   });
  // };
  // // 文本域变化
  // handleContent = (e) => {
  //   this.setState({
  //     content: e.target.value,
  //   });
  // };
  // // 城市的变化
  // handleCity = (e) => {
  //   this.setState({
  //     city: e.target.value,
  //   });
  // };
  // 复选框变化
  // handleIsChecked = (e) => {
  //   this.setState({
  //     isChecked: e.target.checked,
  //   });
  // };

  render() {
    console.log(this.state);
    return (
      <div>
        {/* 文本框 */}
        <input
          type="text"
          name='txt'
          value={this.state.txt}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* 文本域 */}
        <textarea
          name='content'
          value={this.state.content}
          onChange={this.handleChange}
        ></textarea>
        <hr />

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleChange} name='city'>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <hr />

        {/* 复选框 */}
        <input
          type="checkbox"
          name='isChecked'
          checked={this.state.isChecked}
          onChange={this.handleChange}
        ></input>
        <hr />
        <button onClick={() => console.log(this.state)}>提交</button>
      </div>
    );
  }
}